<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue程序渲染</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="d">
    <h2>v-if</h2>
    <input type="number" v-model="score"><br>
    <span v-if="score < 60">不及格</span>
    <span v-else-if="score < 80">及格</span>
    <span v-else-if="score < 90">良</span>
    <span v-else>优</span>

    <h2>v-if 的坑, 定义不同key值, 可以完美解决</h2>
    <input type="radio" value="username" v-model="type">用户账号
    <input type="radio" value="email" v-model="type">邮箱地址
    <div v-if="type=='username'">
        用户账号: <input placeholder="请输入账号" key="username">
    </div>
    <div v-else>
        邮箱地址: <input placeholder="请输入邮箱" key="email">
    </div>

    <h2>v-show, 性能优于v-if</h2>
    <span v-show="score < 60">不及格</span>
    <span v-show="score >=60 && score < 80">及格</span>
    <span v-show="score >=80 && score < 90">良</span>
    <span v-show="score >=90">优</span>

    <h2>v-for</h2>
    <table border="1" width="100%">
        <tr><th>序号</th><th>书名</th><th>出版社</th><th>作者</th><th>出版时间</th></tr>
        <tr v-for=" book,i in books">
            <td>{{i + 1}}</td>
            <td>{{book.bookname}}</td>
            <td>{{book.bookpress}}</td>
            <td>{{book.bookauthor}}</td>
            <td>{{new Date(book.pressdate)}}</td>
        </tr>
    </table>
</div>
<script>
    var v = new Vue({
        el : "#d",
        data : {
            score : 0,
            type : "username",
            books : []
        },
        created(){  // 事件钩子函数, data初始化之后执行
            axios.get("http://47.106.66.89:2222/easy/books/list").then(res=>{
                this.books = res.data;
            })
        }
    })
</script>

</body>
</html>